<template>
	<!-- 发票申请 -->
	<view class="content display width-100 displayColumn all_item">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" ></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">发票管理</text>
			</template>
		</u-navbar>
		<view class="fn_content display  displayColumn width-100 all_item">
			<view class="one_time display  width_699 ">
				<view class="fn_item_title display displayColumn all_item  M-T30" v-for="(item,index) in arr"
					:key="index" @click="changes1(index)">
					<span
						:class="{fontSize:true, font_comm:true, txt1:selectIndex==index,txt2:selectIndex!=index}">{{item}}</span>
					<view class="fn_lines" style="margin-top: 5rpx;" v-if="selectIndex==index">
					</view>
				</view>
			</view>
			<!-- 滚动 -->
			<scroll-view id="ceshi" scroll-y="true" class="scroll-Y" :style="{height: scrollHeight,marginTop:'26rpx'}" @scrolltolower="scrolltolower">
				<view class="fn_card_all display  width-100 all_item displayColumn ">
					<!-- 数据为空时显示 -->
					<view class="display width_699 all_item displayColumn" v-if="false">
						<image style="width: 400rpx;height: 400rpx;" src="@/static/img2/Frame.png" mode=""></image>
						<span class="fontSize font_comm fn_kaipiao">暂无开票记录</span>
					</view>
					<view class="fn_card display displaycenter_aliem  width_699 M-T20 " v-for="(item,index) in arr1" :key="index" v-if="selectIndex==0">
						<!-- 左边 -->
						<view class="fn_card_left display  all_item M-L20">
							<view :class="{fn_btn:!item.flag,fn_btn_cover:item.flag, display:true, all_item:true}"
								@click="changeFlag(index)">
								<uni-icons type="checkmarkempty" color="#fff" size="15" v-if="item.flag"></uni-icons>
							</view>
						</view>
						<!-- 右边 -->
						<view class="fn_card_right display   displayColumn M-L16">
							<view class="fn_card_img_txt display  width-100  ">
								<view class="fn_card_img_txt_right  displayColumn display M-L16">
									<view class="fnjs_ione display  displaycenter_aliem width-100">
										<!-- <span class="fontSize font_comm fn_tt1  " style="font-size: 24rpx;">摩卡兄弟（铁道大学站）</span> -->
										<!-- <view class="fn_three display  fontSize font_comm ">
											<span class="fn_tt4 M-L8">￥</span>
											<span class="fn_tt5">{{item.payCash}}</span>
										</view> -->
										<span class="fontSize font_comm fn_tt2" style="margin-top: 16rpx;">{{item.goodsName}}</span>
										<view class="fn_three display  fontSize font_comm ">
											<span class="fn_tt4 M-L8">￥</span>
											<span class="fn_tt5">{{item.payCash}}</span>
										</view>
									</view>
										<!-- <span class="fontSize font_comm fn_tt2" style="margin-top: 16rpx;">{{item.goodsName}}</span> -->
									<view class="fn_three display  fontSize font_comm M-T16">
										<span class="fn_tt3">充值时间：{{item.createTime}}</span>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="fn_card1 display displayColumn width_699 M-T20" v-if="selectIndex==10" @click="todetails" v-for="(item,index) in 8" :key="index">
						
						<!-- 重新发送 -->
						<block >
							<view class="fn_card1_one  display displaycenter_aliem M-T24">
								<span class="fontSize font_comm fn_time M-L24">2024-8-23</span>
								<uni-icons type="right" class="M-R24" color="#72778A" size="15"></uni-icons>
							</view>
							<view class="fn_card1_two display  displaycenter_aliem M-T20">
								<span class="fontSize font_comm fn_zidong M-L24">自动洗车服务</span>
								<span class="fontSize font_comm fn_money M-R24">￥<span style="font-size: 40rpx;">39.66</span></span>
							</view>
							<view class="fn_wodeline M-T20"></view>
							<view class="bottom_btn display  width-100 displaycenter_aliem M-T32">
								<span class="fontSize font_comm fn_paio M-L24">已开票</span>
								<button class="fontSize font_comm display all_item fn_btns1 M-R24">重新发送</button>
							</view>
						</block>
		
					</view>
					<block v-if="selectIndex==1">
					<!-- 开票成功 -->
					<view class="fn_card1_one1 display displayColumn displaycenter_jus M-T24  fontSize font_comm" v-for="(item,index) in arr1" :key="index" @click="todetails(index)">
						<view class="fn_xx1 display  width-100 displaycenter_aliem" style="justify-content: space-between;">
							<span class="fn_xx1_txt M-L24">洗车服务订单  <span style="font-size: 24rpx;color: #72778A;margin-left: 8rpx;">含2个订单</span> </span>
							<span class="fn_xx1_txt1 M-R24">{{item.invoiceProgress}}</span>
						</view>
						<view class="fn_xx1 display  width-100 displaycenter_aliem M-T16" style="justify-content: space-between;">
							<span class="fn_xx1_time M-L24">{{item.createTime}}</span>
							<span class="fn_xx1_name M-R24">￥<span style="font-size: 40rpx;">{{item.invoiceAmount}}</span></span>
						</view>
					</view>
					</block>
					
					<block v-if="selectIndex==2">
					<view class="fn_card2 display displayColumn width_699 M-T20"  v-for="(items,indexs) in arr1" :key="index">
						<view class="fn_card2_one display width-100  M-T24">
							<span class="fontSize font_comm fn_gongsi  M-L24">发票抬头-{{items.invoiceHeaderType=='0'?'公司':'个人'}}</span>
						</view>
						<view class="fn_wodeline M-T20"></view>
						<view class="fn_card2_two display  width-100 M-T20 displaycenter_aliem">
							<view class="fn_card2_two_left display  displayColumn M-L24">
								<span class="fontSize font_comm fn_name">{{items.headerName}}</span>
								<span class="fontSize font_comm fn_address M-T12">{{items.headerNumber}}</span>
							</view>
							<view class="fn_card2_two_right M-R24 displaycenter_aliem">
								<uni-icons @click="edit(indexs)" type="compose" size="25" color="#72778A;" style="margin-right: 20rpx;"></uni-icons>
								<uni-icons @click="deletes(indexs)" type="trash" size="25" color="#72778A;"></uni-icons>
							</view>
						</view>
					</view>
				</block>
				
				</view>
			</scroll-view>
		</view>
		<!-- 只有可开发票才有 -->
		<!-- 底部菜单 -->
		<view class="bottom_position " v-if="selectIndex==0||selectIndex==2">
			<block v-if="selectIndex==0">
				<view class="fn_bottom_item display  width-100 displaycenter_aliem M-T24">
					<!-- 按钮 -->
					<view class="one_btn display  displaycenter_aliem M-L30" @click="allquanxuan">
						<view :class="{btn:false,btn_cover:allSelct,display:true,all_item:true,btnCover1:!allSelct}">
							<uni-icons type="checkmarkempty" color="#fff" size="15" v-if="allSelct"></uni-icons>
						</view>
						<span class="fontSize font_comm txt3 M-L12" style="white-space: nowrap;">全选</span>
					</view>
					<span class="fontSize font_comm txt4 " style="margin-left: 150rpx;white-space: nowrap;margin-right: 10rpx;">开具发票后将不可申请退款或提现</span>
					<button class="fontSize font_comm btn1 display all_item" style="margin-right: 30rpx;" @click="nextsingle">下一步</button>
				</view>
			</block>
			<block v-if="selectIndex==2">
				<button class="fn_index2 display all_item" @click="addtaitou">添加抬头</button>
			</block>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				selectIndex: 0, //0开具发票 1开票记录 2发票抬头
				arr: ['开具发票', '发票记录', '发票抬头'],
				scrollHeight: '90vh',
				flag: false,
				arr1:[],
				pageNum:1,
				pageSize:10,
				allSelct:false,//全选
				index:'',//选择的发票 索引
				total:100,//总数 total的长度小于pageSize  不请求接口 
			}
		},
		onReady(wode) {
			
			this.getHeight();
		},
		
		  mounted() {
		    uni.$on('refreshPreviousPage', (data) => {
				console.log(data)
		     if(data.data==2){
				 
				 this.pageNum = 1;
				 this.arr1 = [];
				 this.taitouList();
			 }
		    });
		  },
		  onShow() {
		  	if(!this.isLogin){
		  		this.$noLog();
		  		return;
		  	}
		  },
		onLoad(options) {
			if(!this.isLogin){
				this.$noLog();
				return;
			}
			if(!uni.$u.test.isEmpty(options.index)){
				this.selectIndex = Number(options.index);
			}
			this.$modal.loading('加载中')
			if(this.selectIndex ==0){
				// 获取可开发票列表
				this.getcanList();
			}else if(this.selectIndex == 2){
				this.taitouList();
			}else {
				this.getRecordList();
			}
		},
		computed: {
			// 通过计算属性将 state 中的 count 映射到组件
			isLogin() {
				return this.$store.state.isLogin;
			},
			userInfo() {
				return this.$store.state.user;
			},
		},
		methods: {
			// 编辑抬头
			edit(item){
				let id = this.arr1[item].id;
				this.$tab.navigateTo('/packageC/addtaitou/addtaitou?id='+id);
			},
			// 删除抬头
			deletes(item){
				// console.log(item)
				let id = this.arr1[item].id;
				let that = this;
				this.$modal.confirm('确认删除该抬头吗?').then(res=>{
					if(res){
						that.$modal.loading('正在删除')
						// 请求接口
						that.$req.del(`/xcx/userInvoiceHeader/${id}`).then(res=>{
							that.$modal.closeLoading();
							if(res.data.code==200){
								setTimeout(()=>{
									that.$modal.msg('删除成功');
								},500)
								that.pageNum = 1;
								this.arr1 = [];
								that.taitouList();
							}else{
								that.$modal.msg(res.data.msg);
							}
						})
						
					}
				})
			},
			// 添加抬头
			addtaitou(){
				this.$tab.navigateTo('/packageC/addtaitou/addtaitou')
			},
			// 全选
		allquanxuan(){
			this.allSelct = !this.allSelct
			if(this.allSelct){
				for(let i=0;i<this.arr1.length;i++){
					this.arr1[i].flag = true;
				}
			}else{
				for(let j=0;j<this.arr1.length;j++){
					this.arr1[j].flag = false;
				}
			}
		},
			changeFlag(index){
				let x = false;
				this.arr1[index].flag = !this.arr1[index].flag
				// 做个循环判断 是否全为true 或有false
				for(let i=0;i<this.arr1.length;i++){
					if(this.arr1[i].flag){
						 x = true;
					}else{
						x = false;
						break;
					}
				}
				this.allSelct = x;
			},
			scrolltolower(){
				console.log('触底加载');
				if(this.total <= this.arr1.length){
					return false;
				}
				if(this.selectIndex==0){
					this.pageNum++;
					this.getcanList();
				}else if(this.selectIndex==1){
					this.pageNum++;
					this.getRecordList()
				}else{
					this.pageNum++;
					this.taitouList();
				}
			},
			getcanList(){
				let data = {
					pageSize:this.pageSize,
					pageNum:this.pageNum,
					orderByColumn:'',
					isAsc:''
				}
				console.log(data)
				this.$req.get('/xcx/userInvoice/can/list',data).then(res=>{
					this.$modal.closeLoading();
					console.log(res)
					this.total = res.data.total;
					res.data.rows.forEach(item=>{
						this.$set(item,'flag',false);
					})
					this.arr1 = this.arr1.concat(res.data.rows);
					console.log(this.arr1)
				})
			},
			// 跳转发票详情
			todetails(index){
				console.log(index)
				let id = this.arr1[index].id;
				this.$tab.navigateTo('/packageC/Invoicedetails/Invoicedetails?id='+id);
			},
			// 下一步  跳转填写发票信息
			nextsingle(){
				this.$tab.navigateTo('/packageC/Invoiceinfo/Invoiceinfo?arr1='+JSON.stringify(this.arr1))
			},
			changes1(index){
				// 
				this.selectIndex = index;
				
				// 初始化
				this.arr1 = [];
				this.pageNum = 1
				this.$modal.loading('正在加载');
				
				if(this.selectIndex==0){
					// 请求可开具发票记录
					this.getcanList();
				}else if(this.selectIndex==1){
					// 请求发票记录接口
					
					this.getRecordList();
				}else{
					// 抬头
					this.taitouList()
				}
				
				
				
			},
			// 获取抬头列表
			taitouList(){
				let data = {
					pageSize:this.pageSize,
					pageNum:this.pageNum
				}
				this.$req.get('/xcx/userInvoiceHeader/list',data).then(res=>{
					this.$modal.closeLoading();
					// console.log(res);
					this.total = res.data.total;
					this.arr1 = this.arr1.concat(res.data.rows);
				})
			},
			// 获取发票记录列表
			getRecordList(){
				let data = {
					pageSize:this.pageSize,
					pageNum:this.pageNum
				}
				this.$req.get('/xcx/userInvoice/log/list',data).then(res=>{
					this.$modal.closeLoading();
					console.log(res);
					this.arr1 = this.arr1.concat(res.data.rows);
				})
				
			},
			// 获取高度
			getHeight() {
				const that = this
				this.$nextTick(() => {
					uni.getSystemInfo({
						success: function(res) {
							const query = wx.createSelectorQuery()
							query.select('#ceshi').boundingClientRect()
							// 获取滚动容器css数据
							query.exec((resData) => {
								// console.log(resData)
								if (resData && resData.length) {
									// 如果selectindex==1就不用减去底部菜单
									if(that.selectIndex==1){
										// 容器高度 = 可使用窗口高度 - 滚动容器距离顶部位置
										that.scrollHeight = (res.windowHeight - resData[0].top) *
											2 - 30  - 26 + 'rpx'
									}else{
										// 容器高度 = 可使用窗口高度 - 滚动容器距离顶部位置
										that.scrollHeight = (res.windowHeight - resData[0].top) *
											2 - 30 - 196 - 26 + 'rpx'
									}
									
									console.log(that.scrollHeight)
								}
							})
						},
					})
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.title {
		font-weight: 600;
		font-size: 34rpx;
		color: #232323;
	}
	.fn_kaipiao{
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
		margin-top: 5rpx;
	}
	.fn_item {
		width: 690rpx;
		height: 230rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.one_time {
		justify-content: space-between;
	}
	.fn_item_title {}
	.fn_lines {
		width: 36rpx;
		height: 6rpx;
		background: #126BC9;
		border-radius: 3rpx 3rpx 3rpx 3rpx;
	}
	.txt1 {
		font-weight: 600;
		font-size: 28rpx;
		color: #126BC9;
	}
	.txt2 {
		font-weight: 400;
		font-size: 24rpx;
		color: #212121;
	}
	.txt3 {
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}
	.txt4 {
		font-weight: 600;
		font-size: 20rpx;
		color: #FF9901;
	}
	.bottom_position {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 196rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.fn_bottom_item {
		justify-content: space-between;
		width: 750rpx;
	}
	.btn {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 2rpx solid rgba(153, 153, 153, 0.5);
	}
	.btn_cover {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 2rpx solid rgba(153, 153, 153, 0.5);
		background: #126BC9;
	}
	.btnCover1{
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 2rpx solid rgba(153,153,153,0.5);
	}
	.btn1 {
		width: 200rpx;
		height: 80rpx;
		background: #126BC9;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.fn_card {
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		// height: 230rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.fn_btn {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 2rpx solid rgba(153, 153, 153, 0.5);
	}
	.fn_btn_cover {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 2rpx solid rgba(153, 153, 153, 0.5);
		background: #126BC9;
	}
	.fn_title {
		font-weight: 600;
		font-size: 24rpx;
		color: #212121;
	}
	.fn_image {
		width: 132rpx;
		height: 132rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
	.fn_tt1 {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}
	.fn_tt3 {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}
	.fn_tt4 {
		font-weight: 600;
		font-size: 24rpx;
		color: #FF672D;
	}
	.fn_tt5 {
		font-weight: 600;
		font-size: 40rpx;
		color: #FF672D;
	}
	.fn_tt2 {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}
	.fn_two {
		width: 76rpx;
		height: 34rpx;
		background: rgba(18, 107, 201, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		
	}
	.fn_three {
		justify-content: flex-end;
	}
	.fn_card_right_title {
		justify-content: flex-start;
	}
	.fn_card_img_txt_right {
		align-items: flex-start;
		justify-content: flex-start;
	}
	.fn_card1{
		width: 690rpx;
		// height: 250rpx;
		
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.fn_card1_one{
		justify-content: space-between;
	}
	.fn_wodeline{
		width: 642rpx;
		height: 0rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid #F6F6F6;
		margin-left: 24rpx;
	}
	.fn_card1_two{
		justify-content: space-between;
	}
	.bottom_btn{
		justify-content: space-between;
	}
	.fn_time{
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}
	.fn_zidong{
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}
	.fn_money{
		font-weight: 600;
		font-size: 24rpx;
		color: #FF672D;
	}
	.fn_paio{
		font-weight: 600;
		font-size: 28rpx;
		color: #126BC9;
	}
	.fn_btns1{
		width: 152rpx;
		height: 62rpx;
		background: rgba(18,107,201,0.1);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid;
		border-image: linear-gradient(90deg, rgba(23, 105, 143, 1), rgba(173, 157, 246, 1), rgba(23, 105, 143, 1)) 2 2;
		font-weight: 600;
		font-size: 24rpx;
		color: #126BC9;
	}
	.fn_card2{
		// height: 214rpx;
		padding-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.fn_gongsi{
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}
	.fn_name{
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}
	.fn_address{
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}
	.fn_card2_two{
		justify-content: space-between;
	}
	.fn_card2_one{
		justify-content: flex-start;
	}
	.fn_card2_two_left{
		align-items: flex-start;
	}
	.fnjs_ione{
		width:550rpx;
		justify-content: space-between;
	}
	.fn_xx1_txt{
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}
	.fn_xx1_txt1{
		font-weight: 600;
		font-size: 24rpx;
		color: #126BC9;
	}
	.fn_xx1_time{
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}
	.fn_xx1_name{
		font-weight: 600;
		font-size: 24rpx;
		color: #FF672D;
	}
	.fn_card1_one1{
		margin-top: 24rpx;
		width: 690rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.fn_index2{
		width: 690rpx;
		height: 66rpx;
		background: #126BC9;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
	}
</style>